<template>
  <div class="container" v-resize="resize">
    <el-card class="basic_item">
      <div style="display: flex;" class="basic_content">
        <div class="basicData">
          <div class="item_title">
            <div class="title_border"></div>
            <div>基本数据</div>
          </div>
          <div class="basicItem_list">
            <div
              v-for="(item, index) in courseList"
              class="course_item"
              :style="{ backgroundImage: `url(${item.icon})` }"
              :key="index"
            >
              <div class="pd_num">
                <div class="course_item_label">
                  {{ item.label }}
                </div>
                <div class="course_item_value">
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
          <div class="useAmount">
            <div>
              <div>资源库使用量</div>
              <div>
                <el-date-picker
                  v-model="value2"
                  type="month"
                  placeholder="选择月"
                >
                </el-date-picker>
              </div>
            </div>
            <div>
              回到今天
            </div>
          </div>
          <div class="useChart">
            <div class="lineChart" ref="useAmount"></div>
          </div>
        </div>
        <div class="useCharts">
          <div class="item_title">
            <div class="title_border"></div>
            <div>各校资源库使用情况</div>
          </div>
          <div class="barChart" ref="barChart"></div>
        </div>
      </div>
    </el-card>
    <el-card class="useDetail_item">
      <div class="item_title">
        <div class="title_border"></div>
        <div>个人资源库使用情况</div>
      </div>
      <div class="branchSelect">
        <el-select v-model="value" filterable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </el-card>
  </div>
</template>
<script>

import * as echarts from 'echarts'

export default {
  name: 'useDetail',
  data() {
    return {
      courseList: [
        {
          id: '3',
          icon: require('@/assets/images/statistics/course_icon3.png'),
          label: '学校数量(个)',
          value: '--',
          onlineValue: '--'
        },
        {
          id: '1',
          icon: require('@/assets/images/statistics/course_icon1.png'),
          label: '使用人数(人)',
          value: '--',
          onlineValue: '--'
        },
        {
          id: '2',
          icon: require('@/assets/images/statistics/course_icon2.png'),
          label: '资源库容量(TB)',
          value: '--',
          onlineValue: '--'
        }

      ],
      value2: '',
      useAmount: '',
      barChart: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = ''

        function isreize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }

        el.__vueSetInterval__ = setInterval(isreize, 300)
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  mounted() {
    this.getUseAmount()
    this.getbarChart()
  },
  methods: {
    resize() {
      if (this.useAmount) {
        this.useAmount.resize()
      }
      if (this.barChart) {
        this.barChart.resize()
      }
    },
    async getUseAmount() {
      this.useAmount = echarts.init(this.$refs.useAmount)
      let arr1 = ['02-05', '02-06', '02-07', '02-08', '02-09', '02-10', '02-11']
      let arr2 = [10, 12, 14, 10, 18, 4, 22]
      this.setUseOption(arr1, arr2)

    },
    setUseOption(arr1, arr2) {
      let option
      option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(65, 101, 255, 0.1)'
            },
            shadowBlur: 8
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: arr1
          // TODO:设置x轴lable间隔
          // axisLabel:{ // axisLabe可以是一个数值，代表间隔多少，也可以是一个函数
          //   interval:(index,val)=>{
          //     const arr = ['Mon', 'Wed', 'Thu', 'Sat', 'Sun']
          //     // 自定义间隔，return true表示显示label，false不显示label
          //     if (arr.indexOf(val) !== -1) return true;
          //     else return false;
          //   },
          // },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '使用量',
            type: 'line',
            smooth: true,
            data: arr2
          }
        ],
        dataZoom: [
          {
            bottom: 8,
            height: 10,
            type: 'slider', // 使用滑动条来控制
            showDataShadow: true, // 是否显示数据阴影
            start: 0, // 起始位置
            end: 100 // 结束位置
          },
          {
            bottom: 8,
            height: 10,
            type: 'inside', // 使用内置的区域缩放控制
            start: 0,
            end: 2
          }
        ]
      }
      this.useAmount.setOption(option)
    },
    async getbarChart() {
      this.barChart = echarts.init(this.$refs.barChart)
      let arr = ['2024', '2023', '2022', '2021', '2020', '2019', '2018']
      let obj = {
        content1: [100, 200, 300, 400, 500, 600, 700],
        content2: [10, 20, 30, 40, 50, 60, 70]
      }
      this.setbarChartOption(arr, obj)
    },
    setbarChartOption(arr, obj) {
      let option
      option = {
        title: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,
          left: '15%',
          top: '3%',
          textStyle: {
            color: '#9B9B9B'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: { show: true },
          axisLabel: {
            textStyle: {
              color: '#9B9B9B'
            }
          }

        },
        yAxis: {
          type: 'category',
          data: arr,
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: '#9B9B9B'
            }
          },
          axisTick: { show: false }
        },
        series: [
          {
            name: '资源库容量（GB）',
            type: 'bar',
            data: obj.content1,
            itemStyle: {
              color: 'rgba(22, 93, 255, 1)',
              borderColor: 'rgba(22, 93, 255, 1)'
            },
            label: {
              show: true,
              position: 'right',
              color: 'white'
            }
          },
          {
            name: '已使用容量（GB）',
            type: 'bar',
            data: obj.content2,
            itemStyle: {
              color: 'rgba(15, 198, 194, 1)',
              borderColor: 'rgba(15, 198, 194, 1)'
            },
            rich: {
              value: {
                color: '#ffffff'
              }
            },
            label: {
              show: true,
              position: 'right',
              color: 'white'
            }
          }
        ]
      }
      this.barChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  padding: 20px;
  box-sizing: border-box;
  background-color: #fafafa;
  height: calc(100vh - 84px);
  overflow: auto;

  .basic_item {
    width: 100%;
    margin-bottom: 26px;
    height: 560px;
    border-radius: 16px;

    .basic_content {
      display: flex;

      .basicData {
        width: 50%;

        .item_title {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 500;

          .title_border {
            height: 14px;
            width: 4px;
            background-color: #0b8cfc;
            margin-right: 10px;
          }
        }

        .basicItem_list {
          display: flex;
          align-items: center;
          margin-top: 10px;

          .course_item {
            margin-right: 38px;
            width: 176px;
            height: 96px;
            background-size: cover;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            user-select: none;

            &_label {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC, sans-serif;
              font-weight: 500;
              color: #999999;
            }

            &_value {
              font-size: 32px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #333333;
            }
          }
        }

        .useAmount {
          font-size: 14px;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;

          div:first-child {
            display: flex;
            align-items: center;

            div:first-child {
              margin-right: 10px;
            }
          }

          div:last-child {
            font-size: 14px;
            font-weight: 500;
            color: rgba(42, 130, 228, 1);
          }
        }

        .useChart {
          width: 100%;
          height: 320px;

          .lineChart {
            width: 100%;
            height: 100%;
            margin-top: 10px;
          }
        }
      }

      .useCharts {
        width: 50%;

        .item_title {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 500;

          .title_border {
            height: 14px;
            width: 4px;
            background-color: #0b8cfc;
            margin-right: 10px;
          }
        }

        .barChart {
          width: 100%;
          height: 530px;
        }
      }
    }
  }

  .useDetail_item {
    border-radius: 16px;
    height: 100%;

    .item_title {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;

      .title_border {
        height: 14px;
        width: 4px;
        background-color: #0b8cfc;
        margin-right: 10px;
      }
    }

    .branchSelect {
      margin: 20px 0;
    }
  }
}

.pd_num {
  padding: 16px 0 0 74px;
  box-sizing: border-box;
}
</style>
